<template>
    <!-- 排行榜 -->
    <div class="rank container">
        <div class="module">
            <h2 class="rank-title flex-row">云音乐特色榜</h2>
            <song-sheet :sheetList="featureList" />
        </div>
        <div class="module">
            <h2 class="rank-title flex-row">全球媒体榜</h2>
            <song-sheet :sheetList="globalList" />
        </div>
    </div>
</template>

<script>
import songSheet from '@/components/common/songSheet/Index'
export default {
    data() {
        return {
            ranks: [],
        }
    },
    components: {
        songSheet
    },
    created() {
        this.getRanklist();

    },
    computed: {
        featureList: function () {
            return this.ranks.slice(0, 4)
        },
        globalList: function () {
            return this.ranks.slice(4, this.ranks.length)
        }
    },
    methods: {
        // 获取排行榜数据
        async getRanklist() {
            const { data: res } = await this.$api.getRanklist()
            if (res.code !== 200) {
                return this.message.error('获取排行榜失败！');
            }
            // console.log(res);
            this.ranks = res.list
        }
    },
}
</script>

<style lang="less" scoped>
.rank-title {
    border-left: 4px solid #fa2800;
    margin-bottom: 10px;
    padding-left: 10px;
}
</style>